<template>
<div>
     <div >
        <div class="mui-card shopcar-goods" v-for="(item,i) in goods" :key="item.id">
            <!--页眉，放置标题-->
            <div class=" switch-box">
               <mt-switch v-model=" $store.getters.getGoodsSelected[item.id]"
                @change="shopcarbtn(item.id, $store.getters.getGoodsSelected[item.id])"></mt-switch>
            </div>
            
            <!--内容区-->
            <div class="img-box">
                 <img :src="item.thumb_path" alt="">
            </div>
           
            <!--页脚，放置补充信息或支持的操作-->
            <div class="content">
                <p>{{item.title}}</p>
                <span>￥:{{item.sell_price}}</span>
                <numbox :count="$store.getters.updateshopcarlist[item.id]" :goodsid="item.id"></numbox>
                <a href="#" @click.prevent="removeGoods(item.id,i)">删除</a>
            </div>
        </div>
    </div>
     
    <!-- 结算区域 -->
    <div class="mui-card account-box">
        <div>
            <p>总计（不含运费）</p>
            <p>已勾选商品{{$store.getters.getamount.acount}}件,总价&nbsp;￥{{$store.getters.getamount.amount}}</p>
        </div>
        <mt-button type="danger">去结算</mt-button>
    </div>
</div>
   
</template>
<script>
import numbox from "../numbox/numbox.vue"
import mui from '../../../lib/mui/js/mui.min.js'
export default {
    data(){
        return{
            //请求car中商品id，渲染页面，获得的id
            goods:[]
        }
    },
    created(){
        this.getid()
       
    },
    mounted(){
         mui('.mui-switch')['switch']()
    },
    methods:{
        //获取car数组中的所有 id ，凭借成字符串，作为参数 请求商品信息
        getid(){
            var ids = []
            this.$store.state.car.forEach(item=> {
                ids.push(item.id)
            });
            ids=ids.toString()
            this.$http.get("api/goods/getshopcarlist/"+ids).then(result=>{
                if(result.body.status===0){
                    this.goods = result.body.message
                    console.log(this.goods)
                }
            })
        },
        removeGoods(id,index){
            //删除从car中传递过来的id，渲染页面 用的
            this.goods.splice(index,1);
            this.$store.commit("removeGoods",id)
        },
        shopcarbtn(id,val){
            this.$store.commit("removeshopcarbtn",{id,selected:val})
        }
    },
    components:{
        numbox
    }
}
</script>
<style lang="less" scoped>
    .shopcar-goods{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .switch-box{
            width: 50px;
        }
        .img-box{
            width: 60px;
            img{
            width: 60px;
            height: 60px;
            }
        }
        .content{
            width: 217px;
        }
    }

    .account-box{
        padding: 10px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
